<template>
    <v-layout>
        <template slot="header"> 地图点位 </template>
        <template slot="content">
            <div class="exmple-box">
                <a-button type="primary" @click="onAdd">新增</a-button>
                <a-button type="danger">删除</a-button>
                <div class="loaction-list">
                    <div
                        v-for="item in locationList"
                        :key="item.id"
                        class="location"
                    >
                        <div class="name">{{ item.name }}</div>
                        <div class="edit" @click="onEdit(item)">编辑</div>
                        <div class="delete" @click="onDelete(item)">删除</div>
                    </div>
                </div>
                <a-modal v-model="visible" title="地图" @ok="onSave" @cancel="onClose" cancelText="取消" okText="确定" width="700px">
                    <div class="map-box">
                        <v-map :locationList="locationList" :radius="radius" @getCenter="getCenter"></v-map>
                    </div>
                    <a-form class="form-box" :form="form">
                        <a-form-item
                            :label-col="formItemLayout.labelCol"
                            :wrapper-col="formItemLayout.wrapperCol"
                            label="地点"
                        >
                        <span>{{ address }}</span>
                        </a-form-item>
                        <a-form-item
                            :label-col="formItemLayout.labelCol"
                            :wrapper-col="formItemLayout.wrapperCol"
                            label="名称"
                        >
                            <a-input
                                v-decorator="['name', { rules: [{required: true, message:'请输入点位名称'}]}]"
                                placeholder="请输入点位名称"
                            />
                        </a-form-item>
                        <a-form-item
                            :label-col="formItemLayout.labelCol"
                            :wrapper-col="formItemLayout.wrapperCol"
                            label="半径"
                        >
                            <a-input
                                suffix="m"
                                v-decorator="['radius', { initialValue: radius, rules: [{required: true, message: '请输入点位半径'}]}]"
                                placeholder="请输入点位半径"
                                onkeyup="this.value=this.value.replace(/\D/g,'')"
                                onafterpaste="this.value=this.value.replace(/\D/g,'')"
                                @blur="radiusChange"
                                @pressEnter="radiusChange"
                            />
                        </a-form-item>
                    </a-form>
                </a-modal>
            </div>
        </template>
    </v-layout>
</template>

<script>
import vLayout from "@/components/vLayout";
import vMap from "./map.vue";
import { search } from "./factory";
const formItemLayout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 22 },
};
export default {
    components: {
        vLayout,
        vMap,
    },
    data() {
        return {
            visible: false,
            locationList: [],
            center: [],
            address: '',
            radius: 300,
            checkNick: false,
            formItemLayout,
            form: this.$form.createForm(this, { name: "location_form" }),
        };
    },
    methods: {
        onAdd() {
            this.visible = true;
        },
        onEdit(item) {
            this.visible = true;
            this.form.setFieldsValue({
                name: item.name,
                radius: item.radius,
                address: item.address,
            })
        },
        onClose() {
            this.visible = false;
            this.form.resetFields();
        },
        onSave() {
            this.form.validateFields((err, fieldsValue) => {
                if (err) {
                    return;
                }
                // 校验重复性
                const res = this.locationList.some(item => item.name === fieldsValue.name);
                if(res) {
                    this.$message.error("点位名称重复");
                    return;
                }
                this.locationList.push({
                    ...fieldsValue,
                    center: this.center
                });
                this.onClose();
            })
        },
        onDelete(location) {
            this.locationList = this.locationList.filter(item => item.name !== location.name);
        },
        radiusChange() {
            this.radius = +this.form.getFieldValue('radius');
            if(this.radius > 3000) {
                this.form.setFieldsValue({'radius': 3000})
            }
            else if(this.radius < 300) {
                this.form.setFieldsValue({'radius': 300})
            }
            this.radius = +this.form.getFieldValue('radius');
        },
        getCenter(location) {
            this.center = location;
            search('ec44b546474d013c5805429653cef9b1', this.center.join(',')).then(res => {
                this.address = res.regeocode.formatted_address
            })
        }
    },
    mounted() {
    }
};
</script>

<style lang="less" scoped>
.exmple-box {
    .loaction-list {
        width: 500px;
        height: 100%;
        margin-top: 24px;
        .location {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            padding: 0 8px;
            .edit {
                margin-left: auto;
                margin-right: 10px;
                color: #1890ff;
                cursor: pointer;
            }
            .delete {
                color: #ff4d4f;
                cursor: pointer;
            }
            &:hover {
                background: rgba(197, 205, 214, 0.2);
            }
        }
    }
}
.map-box {
    height: 350px;
}
.form-box{
    margin-top: 24px;
    .ant-form-item{
        &:last-of-type{
            margin-bottom: 0;
        }
    }
}
</style>
